import React, { useEffect, useState } from 'react'
import Hoc_login from "@/utils/Hoc_login"
import { Button, Radio, Select, Space, Table, message } from 'antd';
import type { TableProps } from 'antd';
import { getAudit } from '@/api';
import city from "@/data/city.json"


function Index() {

  const [audit, setAudit] = useState()
  // 三级联动数据
  const [provinceData, setProvinceData] = useState(city)
  const [cityData, setCityData] = useState(city[0].children)
  const [cityItem, setCityItem] = useState(city[0].children[0].code)
  const [areaData, setAreaData] = useState(cityData[0].children)
  const [areaItem, setAreaItem] = useState(cityData[0].children[0].code)
  const [wen, setWen] = useState("")

  useEffect(() => {
    (
      async () => {
        let res = await getAudit({ state: '待审核' })
        // console.log(res)
        setAudit(res.data.data.map((item: any) => {
          item.key = item.id
          return item
        }))
      }
    )()
  }, [])



  const columns: TableProps<any>['columns'] = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 70,
      fixed: 'left'
    },
    {
      title: '用户名',
      dataIndex: '',
      key: '',
    },
    {
      title: '手机号',
      dataIndex: '',
      key: '',
      width: 150
    },
    {
      title: '小区名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '地址',
      dataIndex: 'province',
      key: 'province',
    },
    {
      title: '面积',
      dataIndex: 'area',
      key: 'area',
    },
    {
      title: '房产证件图片',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
    },
    {
      title: '发布类型',
      dataIndex: 'address',
      key: 'address',
    },

    {
      title: '操作',
      key: 'action',
      width: 250,
      render: (_, record) => (
        <Space size="middle">
          <a>{record.state}</a>
          <a>{record.state}</a>
          <a>详情</a>
        </Space>
      ),
    },
  ];

  // 三级联动事件
  const handleProvinceChange = (value: any) => {
    const index = provinceData.findIndex((item) => { return item.code == value })
    setCityData(city[index].children)
    setCityItem(city[index].children[0].code)
    setAreaData(city[index].children[0].children)
    setAreaItem(city[index].children[0].children[0].name)
    setWen(city[index].children[0].children[0].name)
    if (value === "00") {
      setWen("")
    }
    if (value == "00") {
      getAudit(audit).then((res: any) => {
        setAudit(res.data.data.map((item: any) => {
          item.key = item.id
          return item
        }))
      })
    }
  };
  const onSecondCityChange = (value: any) => {
    const index = cityData.findIndex((item) => { return item.code == value })
    setCityItem(value)
    setAreaData(cityData[index].children)
    setAreaItem(cityData[index].children[0].name)
    setWen(cityData[index].children[0].name)
  };
  const onAreaChange = (value: any) => {
    const index = areaData.findIndex((item) => { return item.code == value })
    setWen(areaData[index].name)
    setAreaItem(value)
  }

  // 查询事件
  const chaBtn = async () => {
    let res = await getAudit({ county: wen })
    if (res.data.code == 1) {
      message.success("查询成功")
      setAudit(res.data.data.map((item: any) => {
        item.key = item.id
        return item
      }))
    } else {
      message.error('暂无数据')
      setAudit(res.data.data.map((item: any) => {
        item.key = item.id
        return item
      }))
    }
  }
  // 类型事件
  const handleChange = () => {
  }


  // 待审核
  const penddingAudit = async () => {
    let res = await getAudit({ state: '待审核' })
    setAudit(res.data.data)
  }

  // 审核通过
  const YesAudit = async () => {
    let res = await getAudit({ state: '审核通过' })
    setAudit(res.data.data)
  }

  // 审核不通过
  const NoAudit = async () => {
    let res = await getAudit({ state: '审核不通过' })
    setAudit(res.data.data)
  }


  return (
    <div>
      <p>审核管理</p>
      <Radio.Group defaultValue="a" buttonStyle="solid">
        <Radio.Button value="a">发布审核</Radio.Button>
        <Radio.Button value="b">求租求购审核</Radio.Button>
      </Radio.Group>

      {/* 三级联动  */}
      <div>
        <Space>
          <Select
            defaultValue="请选择"
            style={{ width: 100 }}
            onChange={handleChange}
            options={[
              { value: '发布类型', label: '发布类型' },
              { value: '新房出售', label: '新房出售' },
              { value: '有房出售', label: '有房出售' },
              { value: '二手房出售', label: '二手房出售' },
            ]}
          />
          {/* 三级联动 */}
          <Select
            defaultValue={city[0].code}
            style={{ width: 100 }}
            onChange={handleProvinceChange}
            options={provinceData.map((province) => ({ label: province.name, value: province.code }))}
          />
          <Select
            style={{ width: 100 }}
            value={cityItem}
            onChange={onSecondCityChange}
            options={cityData.map((city) => ({ label: city.name, value: city.code }))}
          />
          <Select
            style={{ width: 100 }}
            value={areaItem}
            onChange={onAreaChange}
            options={areaData.map((area) => ({ label: area.name, value: area.code }))}
          />
          <Button type='primary' onClick={chaBtn}>查询</Button>
        </Space>
      </div><br />

      {/* 审核切换 */}
      <Radio.Group defaultValue="待审核" buttonStyle="solid">
        <Radio.Button value="待审核" onClick={penddingAudit} >待审核</Radio.Button>
        <Radio.Button value="审核通过" onClick={YesAudit}>审核通过</Radio.Button>
        <Radio.Button value="审核不通过" onClick={NoAudit}>审核不通过</Radio.Button>
      </Radio.Group>



      {/* 表格 */}
      <Table columns={columns} dataSource={audit} scroll={{ y: 300 }} />
    </div >
  )
}

export default Hoc_login(Index)
